<template>
  <div>
    <el-form size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="上报时间" label-width="80px">
            <el-date-picker
              v-model="searchModel.createdTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" label-width="80px">
            <el-select
              v-model="searchModel.serviceId"
              popper-class="global-select"
              placeholder="选择类型"
              clearable
              filterable
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" style="margin-left: 10px">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="toSearch"
              style="margin-right: 10px"
              >搜索</el-button
            >
            <el-button
              type="info"
              icon="el-icon-delete"
              @click="toReset"
              style="margin-right: 10px"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      ref="attributeTable"
      border
      stripe
      size="medium"
      fit
      :data="dataList | paging(pageNum, pageSize)"
      style="width: 98%"
      :max-height="tableMaxHeight"
    >
      <el-table-column
        align="center"
        label="#"
        type="index"
        :index="indexMethod"
        width="50"
      />
      <af-table-column align="center" label="上报时间" prop="timestamp" width="200">
      </af-table-column>
      <el-table-column align="center" width="200" label="类型" prop="serviceStr">
      </el-table-column>

      <el-table-column label="数据" show-overflow-tooltip>
        <!-- <template slot-scope="{ row }">
          <template v-for="(item, key, index) in row.serviceData">
            <el-row :key="key" v-if="index < 3">
              {{ key }}: {{ item }} -{{ index }}
            </el-row>
          </template>
        </template> -->

        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right-end">
            <!-- <p>姓名:</p>
            <p>住址:</p> -->
            <template v-for="(item, key, index) in scope.row.serviceData">
              <el-row :key="key"> {{ key }}: {{ item }} -{{ index }} </el-row>
            </template>

            <div slot="reference" class="name-wrapper">
              <template v-for="(item, key, index) in scope.row.serviceData">
                <el-row :key="key" v-if="index < 3">
                  {{ key }}: {{ item }} -{{ index }}
                </el-row>
              </template>

              <!-- <el-tag size="medium">{{ scope.row.name }}</el-tag> -->
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
          </template>
        </el-table-column> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :page-sizes="pageSizeOptions"
      @pagination="getDataList"
    />
  </div>
</template>
<script>
import dataTableMixins from "@/mixins/data-table-mixins";
import dataMonitorApi from "@/api/data-monitor.js";
import Pagination from "@/components/Pagination";
export default {
  name: "DataLog",
  components: {
    Pagination,
  },
  mixins: [dataTableMixins],
  props: {
    dataLogList: {
      type: Array,
      default: [],
    },
    id: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      typeList: [
        {
          label: "设备状态/心跳",
          value: "DeviceStatus",
        },
        {
          label: "设备报警",
          value: "Alarm",
        },
        {
          label: "设备控制命令",
          value: "Control",
        },
        {
          label: "设备复位",
          value: "Reset",
        },
        {
          label: "设备上传设置",
          value: "Setting",
        },
      ],

      pageSizeOptions: [5, 10, 20, 30, 40, 50, 80, 100, 120, 150, 200],
      pageNum: 1,
      pageSize: 5,
      tableMaxHeight: this.getHeightAndWidth(),
    };
  },
  mounted() {
    this.getDataList();
    // this.dataList = this.dataLogList
    // this.total = this.dataList.length
  },
  methods: {
    getHeightAndWidth() {
      let clientHeight = 0;
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5; // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5; // 网页可见区域高
      }
      return clientHeight - 550 + "px";
    },
    getDataList() {
      let createdTimeFrom = null;
      let createdTimeTo = null;
      if (Array.isArray(this.searchModel.createdTime)) {
        createdTimeFrom = this.searchModel.createdTime[0];
        createdTimeTo = this.searchModel.createdTime[1];
      }
      const searchModel = {
        id: this.id,
        serviceId: this.searchModel.serviceId ? this.searchModel.serviceId : null,
        createdTimeFrom: createdTimeFrom,
        createdTimeTo: createdTimeTo,
      };
      dataMonitorApi.getSmokeDeviceDetail(searchModel).then((res) => {
        if (res.status === 200) {
          this.dataList = res.data.data.equipmentMonitorLogList;
          this.total = this.dataList.length;
          this.dataList.forEach((ele) => {
            this.typeList.forEach((item) => {
              if (ele.serviceId == item.value) {
                ele.serviceStr = item.label;
              }
            });
          });
        }
      });
    },
    toSearch() {
      this.pageNum = 1;
      this.getDataList();
    },
    toReset(text) {
      this.searchModel = {};
      this.toSearch();
    },
    indexMethod(index) {
      return index + 1 + (this.pageNum - 1) * this.pageSize;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/part-custom";
</style>
